<template>
  <transition name="dialogueAnimation">
    <div class="dialogue" v-if="dialogueShow">
      <span>{{indexDialogue.content}}</span>
      <img :src="indexDialogue.background" />
    </div>
  </transition>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      dialogueShow: false
    };
  },
  computed: {
    ...mapGetters("contentStatus", {
      contentIndex: "getContentIndex"
    }),
    ...mapGetters("wordStatus", {
      indexDialogue: "getIndexDialogue"
    })
  },
  methods: {
    ...mapActions("wordStatus", ["setIndexDialogue", "updateDialogueSerialNumbers"])
  },

  watch: {
    //监听翻页  初始化对白
    contentIndex: function () {
      this.updateDialogueSerialNumbers(0)
      this.setIndexDialogue({})
    },
    //监听对白变化
    indexDialogue: function (item) {
      if (item.serialNumbers) {
        this.updateDialogueSerialNumbers(item.serialNumbers)
        this.dialogueShow = true
      }
      else {
        this.dialogueShow = false
      }
    }
  }
};
</script>

<style scoped lang='stylus'>
.dialogue
  $coord('WHLB', 14rem, 3.5rem, 1.5rem, 6rem)
  background url($urlTitle + 'index/对话背景.png') 0 0 / 100% 100%
  $alignCenter()
  box-sizing border-box
  font-size 0.7rem
  text-align left
  padding 0.5rem 0.5rem 0.5rem 4.5rem
  min-height 3.5rem
  height auto
  transform translate3d(calc(0px - var(--X)), var(--Y), 0px)
  z-index 100
  color rgb(254, 149, 3)
  img
    position absolute
    left -1.5rem
    bottom 0
    width auto
    max-width 40%
    min-height 120%
</style>
